<template>
  <div class="cart_info3_box">
    <div class="cart_info3_box_list2">
      <dv-border-box-1>
        <barchart4/>
      </dv-border-box-1>
      <div class="select_box">
        <dv-border-box-8>
          <div class="select_box_list">
            <div>
              <h1>当前默认选项</h1>
            </div>
            <div class="default_theme">
              <h2>主题：</h2>
              <span class="value">{{ form.theme }}</span>
            </div>
            <div class="default_threshold">
              <h2>阈值：</h2>
              <span class="value">{{ form.threshold }}</span>
            </div>
            <div class="default_threshold">
              <h2>数据来源：</h2>
              <span class="value">{{ this.sourcesShow }}</span>
            </div>
            <div class="default_threshold">
              <h2>接收方式：</h2>
              <span class="value">{{ form.receive }}</span>
            </div>
            <div class="select_button">
              <el-button icon="el-icon-edit" size="mini" @click="openDialog()">点击选择其它类型</el-button>
              <el-dialog title="主题选项" width="50%" :modal="false" :visible.sync="dialogFormVisible">
                <el-form :model="form" label-width="80px">
                  <el-form-item label="主题">
                    <el-select v-model="form.theme">
                      <el-option value="校园的经济" label="校园的经济"></el-option>
                      <el-option value="校园的设施" label="校园的设施"></el-option>
                      <el-option value="校园的投资" label="校园的投资"></el-option>
                      <el-option value="校园的教育" label="校园的教育"></el-option>
                      <el-option value="校园的科研" label="校园的科研"></el-option>
                      <el-option value="校园的社团" label="校园的社团"></el-option>
                      <el-option value="校园与时政" label="校园与时政"></el-option>
                      <el-option value="校园的体育" label="校园的体育"></el-option>
                      <el-option value="校园的游戏" label="校园的游戏"></el-option>
                      <el-option value="校园的娱乐" label="校园的娱乐"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="阈值">
                    <el-radio-group v-model="form.threshold">
                      <el-radio value="20" label=20></el-radio>
                      <el-radio value="40" label=40></el-radio>
                      <el-radio value="60" label=60></el-radio>
                      <el-radio value="80" label=80></el-radio>
                      <el-radio value="100" label=100></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="数据来源">
                    <el-radio-group v-model="form.source">
                      <el-radio value="" label="">全部</el-radio>
                      <el-radio value="weibo" label="weibo">微博</el-radio>
                      <el-radio value="zhihu" label="zhihu">知乎</el-radio>
                      <el-radio value="tieba" label="tieba">贴吧</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="接收方式">
                    <el-radio-group v-model="form.receive">
                      <el-radio label="邮箱"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="closeDialog()">取 消</el-button>
                  <el-button type="primary" @click="submitForm()">确 定</el-button>
                </div>
              </el-dialog>
            </div>
          </div>
          <!-- <centerLeft1 /> -->
        </dv-border-box-8>
      </div>
      <dv-border-box-1>
        <gaugechart1/>
      </dv-border-box-1>
    </div>
    <div class="cart_info3_box_list1">
      <dv-border-box-1>
        <linechart7/>
      </dv-border-box-1>
      <dv-border-box-1>
        <linechart9/>
      </dv-border-box-1>
    </div>
  </div>
</template>

<script>
import barchart4 from "@/components/echart/Bar/barchart4.vue";
import gaugechart1 from "@/components/echart/gauge/gaugechart1.vue";
import linechart7 from "@/components/echart/Line/linechart7.vue";
import linechart9 from "@/components/echart/Line/linechart9.vue";
import qs from 'qs';

export default {
  name: "cart_info3",
  components: {
    //   treemapchart1,
    //   radarchart1,
    //   linechart3,66
    barchart4,
    gaugechart1,
    linechart7,
    linechart9,
  },
  data() {
    return {
      // 主题
      theme: "dark",
      // 阈值
      threshold: 100,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        theme: "校园的经济",
        threshold: "20",
        source: "",
        receive: "邮箱",
      },
      formLabelWidth: "120px"
    };
  },
  computed:{
    sourcesShow(){
      if(this.form.source === "tieba")
        return "贴吧"
      else if(this.form.source === "zhihu")
        return "知乎"
      else if(this.form.source === "weibo")
        return "微博"
      else
        return "全部"
    }
  },
  // components: {},
  mounted() {
    console.log("dsa");
  },
  methods: {
    // 主题
    getTheme() {
      return this.theme;
    },
    // 阈值
    getThreshold() {
      return this.threshold;
    },
    // 打开弹窗
    openDialog() {
      this.dialogFormVisible = true;
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogFormVisible = false;
    },
    // 提交表单
    submitForm() {
      const data = {
        dataSource:this.form.source,
        alertThreshold: this.form.threshold,
        alertTopic:this.form.theme
      }
      console.log(data)
      const response =  this.$http.post("alerts/options",qs.stringify(data))
      console.log(response)
      this.dialogFormVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.cart_info3_box {
  width: 98%;
  margin: 0 auto;
  height: 87vh;
  // background-color: #554444;
  .cart_info3_box_list1 {
    padding: 10px;
    width: 100%;
    height: 42vh;
    // background-color: #554444;
    display: flex;
    flex-direction: row;
  }

  .cart_info3_box_list2 {
    width: 100%;
    padding: 5px;
    height: 44vh;
    // background-color: rgb(57, 62, 66);
    display: flex;
    flex-direction: row;

    .select_box {
      width: 40%;
      height: 90%;
      margin: 0 auto;
      margin-top: 20px;
      // background-color: rgb(255, 255, 255, 0.3);
      //  grid-template-columns: 2fr 3fr 5fr ;
      .select_box_list {
        padding-top: 40px;
        margin: 0 auto;
        width: 70%;
        height: 80%;
        // background-color: aquamarine;
        // border: solid 1px sandybrown;
        // margin-top: 20px;
        text-align: left;

        .default_theme {
          margin-top: 25px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          .value {
            font-size: 15px;
            font-weight: 900;
          }
        }

        .default_threshold {
          display: flex;
          margin-top: 20px;
          flex-direction: row;
          justify-content: space-between;

          .value {
            font-size: 15px;
            font-weight: 900;
          }
        }

        .select_button {
          margin-top: 30px;
        }
      }
    }
  }
}
</style>